<template>
  <div>
    <textarea v-model="code" style="width: 500px; height: 300px"></textarea>
    <div ref="code-preview"></div>
    <el-button @click="execCode">Code Preview</el-button>
  </div>
</template>

<script>
import metaRuntimeTemplate from "@/components/meta-runtime-template";
import Vue from "vue";
import { match } from "@/components/meta-runtime-template/utils";
import tmpl from "@/components/meta-runtime-template/tmpl";

export default {
  components: {
    // metaRuntimeTemplate,
  },
  data() {
    return {
      code: tmpl,
    };
  },
  methods: {
    execCode() {
      let { template, jsContent } = match(this.code);
      let container = document.createElement("div");

      this.$refs["code-preview"].innerHTML = "";
      this.$refs["code-preview"].appendChild(container);

      this.$nextTick(() => {
        let temp = Object.assign(
          {
            components: { metaRuntimeTemplate },
            render() {
              return (
                <meta-runtime-template
                  template={template}
                ></meta-runtime-template>
              );
            },
          },
          eval(`({${jsContent}})`)
        );
        new Vue(temp).$mount(container);
      });
    },
  },
};
</script>